<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script>
        // 两个接口请求 一个页面同时拿到两个接口数据 promise.all



        // https://www.frontendjs.com/

        // 1- （串行）先请求a，a成功以后再请求b， b成功的后 就可以使用a和b的结果 
        // 2- 并行 a 和b 同时进行，监听 a 和b 都成功的时间点--let p0 = promise.all([p1,p2])

        var cateAPI = 'https://www.frontendjs.com/api/w_cate'
        var siteAPI = 'https://www.frontendjs.com/api/w_site'

        // 1- （串行）先请求a，a成功以后再请求b， b成功的后 就可以使用a和b的结果 

        async function box() {
            // 先请求cateAPI，cateAPI 成功了，再请求 siteAPI
            let r1 = await axios.get(cateAPI);
            let r2 = await axios.get(siteAPI);
            console.log(r1.data.data);
            console.log(r2.data.data.list);
        }

        // box()

        // 2- 并行 a 和b 同时进行，监听 a 和b 都成功的时间点--let p0 = promise.all([p1,p2])


        // cateAPI，siteAPI 同时发起，都成功 以后 p0 。then 就执行

        let p1 = axios.get(cateAPI);
        let p2 = axios.get(siteAPI);
        let p0 = Promise.all([p1, p2]);
        p0.then(r => {
            // [p1的结果,p2的结果]
            console.log(r);
            let [r1, r2] = r;
            console.log(r1.data.data);
            console.log(r2.data.data.list);
        })




    </script>

</body>

</html>